<%--
  Created by IntelliJ IDEA.
  User: samsung
  Date: 2020/7/23
  Time: 9:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>网站后台管理模版</title>
    <link rel="stylesheet" type="text/css" href="../../back/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="../../back/css/admin.css"/>
    <script src="../../back/js/jquery-3.2.1.js"></script>

    <%--<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">--%>
    <%--<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>--%>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <%--<link rel="stylesheet" href="css/jquery.my-modal.1.1.css" />--%>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/jquery.my-modal.1.1.js"></script>

    <style>
        *{
            padding: 0;
            margin:0;
        }
        body{
            width: 100%;
            height:100%;
            background: #fff;
        }
        .toggleModal{
            padding: 10px 20px;
            color: white;
            background: #409EFF;
            border:none;
            box-shadow: 2px 3px 20px rgba(0,0,0,0.2);
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        .mask{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.4);
            z-index: 100;
            display: none;
        }
        .modal{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 650px;
            transform: translate(-50%,-50%);
            border-radius: 5px;
            background: #fff;
            box-shadow: 2px 3px 20px rgba(0,0,0,0.2);
            z-index: 120;
            display: none;
        }
        .modal .modal-header{
            height: 50px;
            border-bottom: 1px solid #f5f5f5;
            padding: 0 15px;
        }
        .modal .modal-header p {
            line-height: 50px;
            display: inline-block;
        }
        .modal .modal-header .title{
            font-size: 18px;
            color: #333;
        }
        .modal .modal-header .close{
            float: right;
            font-size: 26px;
            margin-top: -2px;
            color: #9C9FA4;
            cursor: default;
        }
        .modal .modal-content{
            min-height: 380px;
        }
        .modal .modal-footer .btn{
            padding: 0 20px;
            height: 36px;
            line-height: 36px;
            color: white;
            background: #409EFF;
            border: none;
        }
        .modal .modal-footer{
            border-top: 1px solid #f5f5f5;
            padding: 15px;
            text-align: right;

        }
        .container::after{
            content:"";
            display: block;
            clear: both;
        }
    </style>

</head>
<body>
<div class="main-layout" id='main-layout'>
    <!--侧边栏-->
    <div class="main-layout-side">
        <div class="m-logo">
        </div>
        <ul class="layui-nav layui-nav-tree" lay-filter="leftNav" id="leftCinema">
            <li class="layui-nav-item layui-nav-itemed">
                <a href="/back/user-manage.jsp"><i class="iconfont">&#xe606;</i>用户管理</a>
            </li>
            <%--<li class="layui-nav-item">
                <a href="javascript:;" data-url="article-list.html"><i class="iconfont">&#xe608;</i>电影管理</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;"><i class="iconfont">&#xe604;</i>场次管理</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;"><i class="iconfont">&#xe60c;</i>评论管理</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;"><i class="iconfont">&#xe600;</i>订单管理</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;"><i class="iconfont">&#xe60d;</i>票房统计</a>
            </li>--%>
        </ul>
    </div>
    <!--右侧内容-->
    <div class="main-layout-container">
        <!--头部-->
        <div class="main-layout-header">
            <ul class="layui-nav" lay-filter="rightNav">
                <li class="layui-nav-item">
                    <a href="javascript:;" data-url="admin-info.html" data-id='5' data-text="个人信息">超级管理员</a>
                </li>
                <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/admin/outLogin">退出</a></li>
            </ul>
        </div>
        <!--主体内容-->
        <div class="main-layout-body">
            <!--tab 切换-->
            <div class="layui-tab layui-tab-brief main-layout-tab" lay-filter="tab" lay-allowClose="true">
                <ul class="layui-tab-title">
                    <%--welcome--%>
                    <li class="layui-this welcome">用户信息</li>
                    <%--<li class="layui welcome">影院用户</li>--%>
                </ul>
            </div>

            <div class="column-content">
                <div class="column-content-detail">
                        <div class="layui-form-item">
                            <div class="layui-inline tool-btn">
                                <button class="layui-btn layui-btn-normal" id="insertUser" data-toggle="modal" data-target="#insertModal">
                                    <i class="layui-icon">&#xe654;</i>
                                </button>
                            </div>

                            <div class="layui-inline" >
                                <label>每页:</label>
                                <%--lay-filter="status" selected --%>
                                <select name="pageSize" id="selectPageSize" style="width: 128px;height: 37px;border:solid 1px #CCC;">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option selected value="3">3</option>
                                    <option value="5">5</option>
                                    <option value="10">10</option>
                                </select>
                                <label>条</label>
                            </div>
                            <div class="layui-inline">
                                <%--required lay-verify="required" autocomplete="off"--%>
                                <input type="text" id="searchName" autocomplete="off" placeholder="请输入姓名" class="layui-input">
                            </div>
                            <%--class="layui-btn layui-btn-normal"--%>
                            <button class="layui-btn layui-btn-normal" id="search_button" style="height: 37px">搜索</button>
                            <button class="layui-btn layui-btn-small layui-btn-danger delBtn" id="clearSearch" data-url="article-add.html" style="height: 37px">
                                <i class="layui-icon">&#xe640;</i>
                            </button>
                        </div>
                    <div class="layui-form" id="table-list">
                        <table class="layui-table" lay-even lay-skin="nob">
                            <colgroup>
                                <%--<col width="50">--%>
                                <col class="hidden-xs" width="150">
                                <col class="hidden-xs" width="150">
                                <col class="hidden-xs" width="150">
                                <col class="hidden-xs" width="150">
                                <col class="hidden-xs" width="150">
                                <%--<col width="80">
                                <col width="150">--%>
                            </colgroup>
                            <thead>
                            <tr>
                                <%--<th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>--%>
                                <th class="hidden-xs">ID</th>
                                <th class="hidden-xs">姓名</th>
                                <th class="hidden-xs">密码</th>
                                <th class="hidden-xs">头像</th>
                                <th class="hidden-xs">操作</th>
                            </tr>
                            </thead>
                            <tbody id="userContainer">
                                <%--<tr>
                                    <td><input type="checkbox" name="" lay-skin="primary" data-id="1"></td>
                                    <td class="hidden-xs">1</td>
                                    <td class="hidden-xs"><input type="text" name="userName" autocomplete="off" class="layui-input" value="userName" data-id="1"></td>
                                    <td>玩具</td>
                                    <td class="hidden-xs"><img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" style="width: 50px;height: 50px"></td>
                                    &lt;%&ndash;<td class="hidden-xs">1989-10-14</td>&ndash;%&gt;
                                    &lt;%&ndash;<td><button class="layui-btn layui-btn-mini layui-btn-normal">正常</button></td>&ndash;%&gt;
                                    <td>
                                        <div class="layui-inline">
                                            <button class="layui-btn layui-btn-small layui-btn-normal  edit-btn" data-id="1"><i class="layui-icon">&#xe642;</i></button>
                                            <button class="layui-btn layui-btn-small layui-btn-danger del-btn" data-id="1"><i class="layui-icon">&#xe640;</i></button>
                                        </div>
                                    </td>
                                </tr>--%>
                            </tbody>
                        </table>
                        <div class="page-wrap" style="margin:0 auto;text-align: center;">
                            <ul class="pagination">
                                <%--<li class="disabled" style="width: 50px"><span>首页</span></li>
                                <li class="disabled" style="width: 50px"><span>上一页</span></li>
                                <li class="active"><span>1</span></li>
                                <li><span title="2">2</span></li>
                                <li style="width: 50px"><span>上一页</span></li>
                                <li class="active" style="width: 50px"><span>尾页</span></li>--%>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>

        </div>

    </div>
    <!--遮罩-->
    <div class="main-mask">

    </div>

</div>

<%--添加用户模态框--%>
<div class="modal fade" id="insertModal" style="display: none">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h2 class="modal-title">添加用户</h2>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <form action="${pageContext.request.contextPath}/getUser/insertUser" enctype="multipart/form-data" method="post" class="layui-form"  style="width: 90%;padding-top: 20px;">
            <div class="modal-body">
                <div class="layui-tab-item layui-show">
                    <%--<form action="${pageContext.request.contextPath}/getUser/insertUser" enctype="multipart/form-data" method="post" class="layui-form"  style="width: 90%;padding-top: 20px;">--%>
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名：</label>
                            <div class="layui-input-block">
                                <input type="text" id="accountName" name="accountName" required  lay-verify="required" placeholder="请输入用户名" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码：</label>
                            <div class="layui-input-block">
                                <input type="password" id="password" name="password" required  lay-verify="required" placeholder="请输入密码" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">上传图片：</label>
                            <div class="layui-input-block">
                                <input type="file" id="file" name="file" class="filepath" onchange="setImagePriview()" accept="image/jpg,image/jpeg,image/png">
                                <%--<img src="#" id="img3" />--%>
                            </div>
                        </div>
                    <%--</form>--%>
                </div>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <input class="layui-btn layui-btn-normal" type="submit" value="提交">
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
            </form>

        </div>
    </div>
</div>

<!-- 修改用户信息模态框 -->
<div class="modal fade" id="updateModal" style="display: none">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">修改</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 ../getUser/updateUser-->
            <form id="updateForm" action="#" enctype="multipart/form-data" method="post" class="layui-form"  style="width: 90%;padding-top: 20px;">
            <div class="modal-body">
                <div class="layui-tab-item layui-show" style="width: 600px;height: 220px">
                    <%--<form action="${pageContext.request.contextPath}/getUser/updateUser" enctype="multipart/form-data" method="post" class="layui-form"  style="width: 90%;padding-top: 20px;">--%>
                        <div class="layui-form-item">
                            <label class="layui-form-label">ID：</label>
                            <div class="layui-input-block">
                                <%--disabled autocomplete="off" class="layui-input layui-disabled"--%>
                                <input type="text" id="updateAccountId" name="updateAccountId" class="layui-input layui-disabled">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名：</label>
                            <div class="layui-input-block">
                                <input type="text" id="updateAccountName" name="updateAccountName" required  lay-verify="required" placeholder="请输入修改后的用户名" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码：</label>
                            <div class="layui-input-block">
                                <input type="password" id="updatePassword" name="updatePassword" required  lay-verify="required" placeholder="请输入修改后的密码" class="layui-input layui-disabled">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">上传图片：</label>
                            <div class="layui-input-block">
                                <input type="file" id="updatefile" name="updatefile" class="filepath" accept="image/jpg,image/jpeg,image/png">
                            </div>
                        </div>

                </div>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="layui-btn layui-btn-normal" id="update_button" data-dismiss="modal">修改</button>
                <%--<input type="submit" class="layui-btn layui-btn-normal" id="update_button" value="修改">--%>
                <button type="button" class="layui-btn layui-btn-normal" data-dismiss="modal">关闭</button>
                <%--<button type="reset" class="layui-btn layui-btn-primary">重置</button>--%>
                <%--<button type="button" class="layui-btn layui-btn-normal" id="update_button">修改</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>--%>
            </div>
            </form>

        </div>
    </div>
</div>

<script src="../../back/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="../../back/js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="../../back/js/main.js" type="text/javascript" charset="utf-8"></script>
<script>
    $(document).ready(function(){

        // 首页显示3条数据
        // 页面一进入请求分页数据
        sendAjax(1,3);
        sendAjaxCinema();

        // 选择文件的改变事件,生成图片预览功能
        /*function setImagePriview(){
            // 得到文件列表数组,获取数组中的第一个文件
            var file = document.getElementById("file").files[0];
            // 没有选择文件
            if(file==null){
                document.getElementById("img3").src = "#";
            }else{
                // 构建一个文件渲染对象
                var reads = new FileReader();
                // FileReader.readAsDataURL 读取指定Blob或File的内容
                reads.readAsDataURL(file);
                // 获取文件数据
                reads.onload = function(){
                    // 显示图片
                    document.getElementById("img3").src = this.result;
                }
            }

        }*/

        // 分页点击事件
        $(document).on("click",".pagination a",function () {
            var pageNum = $(this).prop("title"); // 每一个a标签的title属性值就是页码
            // 获取当前页面条数
            var pageSize = $("#selectPageSize").val();
            // 发送请求
            sendAjax(pageNum,pageSize);
        });

        // 7.选择显示记录数的下拉框事件
        $(document).on("change","#selectPageSize",function(){
            // 调用发送异步请求的方法,参数是页码
            // 获取当前页面条数
            var pageSize = $("#selectPageSize").val();
            // 发送请求
            sendAjax(1,pageSize);
        });

        // 搜索事件
        $(document).on("click","#search_button",function(){
            // 获取当前页面条数
            // var pageNum  = "1";
            var pageSize = $("#selectPageSize").val();
            // 发送请求
            sendAjax(1,pageSize);
            //$("#searchName").val("");
        });

        // 清空搜索条件
        $(document).on("click","#clearSearch",function(){
            $("#searchName").val("");
        });

        //10.打开修改模态框
        $(document).on("click",".open_update_modal",function(){
            // 获取原来的数据
            var accountId = $(this).data("accountid"); // '001' -- 001
            // accountId = accountId.substring(1,accountId.length-1);
            var accountName =  $(this).data("accountname");
            var password =  $(this).data("password");
            var facePicture = $(this).data("facepicture");// 这个好像没啥用

            // 显示在模态框中指定的位置
            $("#updateModal #updateAccountId").val(accountId);
            $("#updateModal #updateAccountName").val(accountName);
            $("#updateModal #updatePassword").val(password);
            $("#updateModal #updatefile").val(facePicture); // 这个也是没用
        });

        //11.修改事件<%--${pageContext.request.contextPath}--%>
        $(document).on("click","#update_button",function(){
            /*var accountId = $("#updateModal #updateAccountId").val();
            var accountName = $("#updateModal #updateAccountName").val();
            var password = $("#updateModal #updatePassword").val();
            var facePicture = $("#updateModal #updatefile").val();*/

            // 获取页码
            var pageNum = $("#pageInfo").data("pagenum");
            // 获取当前页面条数
            var pageSize = $("#selectPageSize").val();
            // 获取搜索的用户名
            //var accountName = $("#searchName").val();

            // 表单提交(带文件的组件),包括文件流需要使用FormData对象
            var formData = new FormData($("#updateForm")[0]);

            $.ajax({
                async:true,
                url:"${pageContext.request.contextPath}/getUser/updateUser",
                type:"POST",
                data:formData, // 重点是必须只有一个变量----formData
                dataType:"text",
                processData:false,// 必须设置为false,因为formData值为对象,不需要对数据做处理
                contentType:false, // 必须设置为false,因为formData为对象,且已经声明了属性enctype="multipart/form-data"
                success:function(result,status,xhr){
                    //alert(result);
                    if(result == "true"){
                        sendAjax(pageNum,pageSize);
                    }
                    // 渲染页面
                    //showData(result);
                },
                error:function(xhr,status,error){
                    alert("update异步请求失败!");
                }
            });

        });

        // 删除前端用户
        $(document).on("click",".delete",function(){
           if(window.confirm("是否确认删除")){
               // 获取id
               var accountId = $(this).data("accountid");
               // 获取页码
               var pageNum = $("#pageInfo").data("pagenum");
               //alert(pageNum);
               // 获取当前页面条数
               var pageSize = $("#selectPageSize").val();
               // 发送ajax
               $.ajax({
                   async:true,
                   url:"${pageContext.request.contextPath}/getUser/deleteUser",
                   type:"GET",
                   data:{deleteAccountId:accountId,
                         pageNum:pageNum,
                         pageSize:pageSize,
                         accountName:$("#searchName").val()},
                   dataType:"json",
                   success:function(result,status,xhr){
                       // 渲染页面
                       showData(result);
                   },
                   error:function(xhr,status,error){
                       alert("delete异步请求失败!");
                   }
               });
           }
        });

        // 一进入页面发送ajax,对页面进行渲染
        function sendAjax(pageNum,pageSize){

            // 一进入页面发送ajax,显示前端用户信息
            $.ajax({
                async:true,
                url:"${pageContext.request.contextPath}/getUser/userPage",
                type:"GET",
                data:{pageNum:pageNum,
                      pageSize:pageSize,
                      accountName:$("#searchName").val()
                      },
                dataType:"json",
                success:function(result,status,xhl){
                    console.log(result);
                    // 调用数据渲染的方法
                    showData(result)

                },
                //请求失败时的响应函数
                error:function(xhr,status,error){
                    alert("请求失败");
                }
            });
        }

        /*渲染数据*/
        function showData(result){
            // 清空原始数据
            $("#userContainer").empty();
            $(".pagination").empty();
            // 前端用户渲染
            var content = "";
            $.each(result.list,function(index,Account){
                content += "<tr>\n" +
                    "        <td class=\"hidden-xs\">" + Account.accountId + "</td>\n" +
                    "        <td class=\"hidden-xs\" style=\"width: 100px\">" + Account.accountName + "</td>\n" +
                    "        <td class=\"hidden-xs\" style=\"width: 100px\"><input type=\"password\" name=\"password\" autocomplete=\"off\" class=\"layui-input layui-disabled\" value=\""+ Account.password +"\" data-accountid=\"" + Account.password + "\"></td>\n" +
                    "        <td class=\"hidden-xs\"><img src=\"../fileDownload/" + Account.facePicture + "\" style=\"width: 50px;height: 50px\"></td>\n" +
                    "        <td>\n" +
                    "        <div class=\"layui-inline\">\n" +
                    "               <a href=\"#\" class=\"open_update_modal layui-btn layui-btn-small layui-btn-normal edit-btn\" data-toggle=\"modal\" data-target=\"#updateModal\"" +
                    "               data-accountid=\"" + Account.accountId + "\"" +
                    "               data-accountname=\"" + Account.accountName + "\"" +
                    "               data-password=\"" + Account.password + "\"" +
                    "               data-facepicture=\"" + Account.facePicture + "\">" +
                    "                   <i class=\"layui-icon\">&#xe642;</i>" +
                    "               </a>" +
                    "               <a class=\"delete layui-btn layui-btn-small layui-btn-danger del-btn\" data-accountid=\"" + Account.accountId + "\">" +
                    "                   <i class=\"layui-icon\">&#xe640;</i>" +
                    "               </a>\n" +
                    "        </div>\n" +
                    "        </td>\n" +
                    "   </tr>";
            });

            $("#userContainer").html(content);

            // 分页数据的渲染
            var pageContent = "";

            pageContent += "<li style=\"width: 180px;\"><span id=\"pageInfo\" data-pagenum=\""+
                result.pageNum+"\"  data-pagesize=\""+
                result.pageSize+"\"  data-pagetotal=\""+
                result.total+"\"  data-pagepages=\""+
                result.pages+"\">每页"+result.pageSize+"条 共"+result.total+"条 第"+result.pageNum+"/"+result.pages+"页</span></li>";

            // 默认样式：已经是当前页则会点亮,使用span标签设置为class="disable"不可用状态,其他使用a标签,可用状态
            // 首页+上一页
            if(result.pageNum == 1){

                pageContent += "<li class=\"active disabled\" title=\"1\" style=\"width: 50px;\"><span>首页</span></li>";
                pageContent += "<li class=\"disabled\" title=\"1\" style=\"width: 50px\"><span>上一页</span></li>";
            }else{
                pageContent += "<li style=\"width: 50px\"><a href=\"#\" title=\"1\">首页</a></li>";
                pageContent += "<li style=\"width: 50px\"><a href=\"#\" title=\""+result.prePage+"\">上一页</a></li>";
            }

            // 页码
            if(result.pages <= 7) {
                for (var i = 1; i <= result.pages; i++) {
                    if (result.pageNum == i) {
                        pageContent += "<li class=\"active disabled\" style=\"width: 50px\"><span title=\"" + i + "\" >" + i + "</span></li>";
                    } else {
                        pageContent += "<li style=\"width: 50px\"><a href=\"#\" title=\"" + i + "\">" + i + "</a></li>";
                    }
                }
            }

            if(result.pages > 7) {
                if (result.pageNum <= 4) {
                    for (var i = 1; i <= 5; i++) {
                        if (result.pageNum == i) {
                            pageContent += "<li class=\"active disabled\" style=\"width: 50px\"><span title=\"" + i + "\" >" + i + "</span></li>";
                        } else {
                            pageContent += "<li style=\"width: 50px\"><a href=\"#\" title=\"" + i + "\">" + i + "</a></li>";
                        }
                    }
                    pageContent += "<li style=\"width: 50px\">......</li>";
                    if (result.pageNum == result.pages) {
                        pageContent += "<li class=\"active disabled\" style=\"width: 50px\"><span title=\"" + result.pages + "\" >" + result.pages + "</span></li>";
                    } else {
                        pageContent += "<li style=\"width: 50px\"><a href=\"#\" title=\"" + result.pages + "\">" + result.pages + "</a></li>";
                    }
                }
                if(result.pageNum > 4){
                    if(result.pageNum < result.pages - 3){
                        pageContent += "<li style=\"width: 50px\"><a href=\"#\" title=\"" + 1 + "\">" + 1 + "</a></li>";
                        pageContent += "<li style=\"width: 50px\">......</li>";
                        for(var i = result.pageNum-1; i <= result.pageNum + 1; i++){
                            if (result.pageNum == i) {
                                pageContent += "<li class=\"active disabled\" style=\"width: 50px\"><span title=\"" + i + "\" >" + i + "</span></li>";
                            } else {
                                pageContent += "<li style=\"width: 50px\"><a href=\"#\" title=\"" + i + "\">" + i + "</a></li>";
                            }
                        }
                        pageContent += "<li style=\"width: 50px\">......</li>";
                        if (result.pageNum == result.pages) {
                            pageContent += "<li class=\"active disabled\" style=\"width: 50px\"><span title=\"" + result.pages + "\" >" + result.pages + "</span></li>";
                        } else {
                            pageContent += "<li style=\"width: 50px\"><a href=\"#\" title=\"" + result.pages + "\">" + result.pages + "</a></li>";
                        }
                    }
                }

                if(result.pageNum > result.pages - 4){
                    pageContent += "<li style=\"width: 50px\"><a href=\"#\" title=\"" + 1 + "\">" + 1 + "</a></li>";
                    pageContent += "<li style=\"width: 50px\">......</li>";
                    for(var i = result.pages - 4; i <= result.pages; i++){
                        if (result.pageNum == i) {
                            pageContent += "<li class=\"active disabled\" style=\"width: 50px\"><span title=\"" + i + "\" >" + i + "</span></li>";
                        } else {
                            pageContent += "<li style=\"width: 50px\"><a href=\"#\" title=\"" + i + "\">" + i + "</a></li>";
                        }
                    }
                }

            }

            // 下一页+尾页
            if(result.pageNum == result.pages){
                pageContent += "<li class=\"disabled\" style=\"width: 50px\"><span title=\"" + result.pages + "\">下一页</span></li>";
                pageContent += "<li class=\"active disabled\" style=\"width: 50px\"><span title=\"" + result.pages + "\">尾页</span></li>";
            }else{
                pageContent += "<li style=\"width: 50px\"><a href=\"#\" title=\"" + result.nextPage + "\">下一页</a></li>";
                pageContent += "<li style=\"width: 50px\"><a href=\"#\" title=\"" + result.pages + "\">尾页</a></li>";

            }

            $(".pagination").html(pageContent);
        }

        // 一进入页面发送ajax,对对左侧导航栏进行渲染
        function sendAjaxCinema(){

            // 一进入页面发送ajax,显示前端用户信息
            $.ajax({
                async:true,
                url:"${pageContext.request.contextPath}/getMovieInCinema/getCinemaList",
                type:"GET",
                data:{},
                dataType:"json",
                success:function(result,status,xhl){
                    console.log(result);
                    //alert("222");
                    // 调用数据渲染的方法
                    /*$.each(result,function(index,Cinema){
                        alert(Cinema.cinemaName);
                    });*/
                    showDataCinema(result)

                },
                //请求失败时的响应函数
                error:function(xhr,status,error){
                    alert("请求失败");
                }
            });
        }

        /*渲染数据
		*/
        function showDataCinema(result){
            // 清空原始数据
            //$("#leftCinema").empty();
            // 左侧导航栏渲染
            var content = "";
            $.each(result,function(index,Cinema){
                //alert(Cinema.cinemaName);
                content += "<li class=\"layui-nav-item layui-nav-itemed\">\n" +
                    "                <a href=\"../back/cinema_manage.jsp?cinemaName=" + Cinema.cinemaName + "\" class=\"cinemaName\" data-cinemaname=\"" + Cinema.cinemaName + "\"><i class=\"iconfont\">&#xe606;</i>" + Cinema.cinemaName + "</a>\n" +
                    "            </li>";
            });

            $("#leftCinema").append(content);

        }

    })
</script>
</body>
</html>